<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Demo - Validform - 一行代码搞定整站的表单验证！ &copy;瑞金佬的前端路</title>

<!-- 导入css: style.css  -->
<link rel="stylesheet" href="demo/css/style.css" type="text/css" media="all" />


<link href="demo/css/demo.css" type="text/css" rel="stylesheet" />

</head>

<body>  
<div class="main">
    <div class="wraper">
    	<h1>Validform功能示例</h1>
        <p><a href="demo.html" class="blue ml10 fz12">返回示例首页&raquo;</a></p>
        
    	<h2 class="green">Validform实现用户名的实时验证</h2>
        
        <form class="registerform" action="demo/ajax_post.php">
            <table width="100%" style="table-layout:fixed;">
                <tr>
                    <td class="need" style="width:10px;">*</td>
                    <td style="width:70px;">用户名：</td>
                    <td style="width:205px;">
                    	<!-- 
                    		class="inputxt" : 表示可以验证的输入框,必须设置
                    		datatype="s6-18" :  验证的规则(这里表示为:6-18位字符)
                    	-->
                    	<input type="text" value="" name="name" class="inputxt"  datatype="s6-18" errormsg="用户名至少6个字符,最多18个字符！" />
                    </td>
                    
                    <td>
                    	<!-- class="Validform_checktip"  验证失败的提示文字 -->
                    	<div class="Validform_checktip">用户名至少6个字符,最多18个字符</div>
                    </td>
                </tr>
                <tr>
                    <td class="need">*</td>
                    <td>密码：</td>
                    <td><input type="password" value="" name="userpassword" class="inputxt" datatype="*6-16" nullmsg="请设置密码！" errormsg="密码范围在6~16位之间！" /></td>
                    <td><div class="Validform_checktip">密码范围在6~16位之间</div></td>
                </tr>
                <tr>
                    <td class="need">*</td>
                    <td>确认密码：</td>
                    <td><input type="password" value="" name="userpassword2" class="inputxt" datatype="*" recheck="userpassword" nullmsg="请再输入一次密码！" errormsg="您两次输入的账号密码不一致！" /></td>
                    <td><div class="Validform_checktip">两次输入密码需一致</div></td>
                </tr>
                <tr>
                    <td class="need"></td>
                    <td></td>
                    <td colspan="2" style="padding:10px 0 18px 0;">
                        <input type="submit" value="提 交" /> <input type="reset" value="重 置" />
                    </td>
                </tr>
            </table>
        </form>
        
        <h2>说明：</h2>
        <div class="tipmsg">
        	<p><strong>ajaxurl：</strong>会把当前元素的值Post给ajaxurl指定的文件。</p>
            <p>ajaxurl指定的文件可以接收到Post过来的两个值，分别是param和name，param是该元素的值，name是该元素的name名称。可以通过区别name来把一个表单下，多个实时验证请求，都指定到同一个文件。</p>
            <p>首先会对datatype进行验证，只有验证通过后才会Post数据。</p>
        </div>
         
    </div>
</div>

<div class="footer">
    <div class="wraper">
        <p class="fl">Copyright &copy; <a href="http://www.rjboy.cn" target="_blank">瑞金佬的前端路</a></p>
        <p class="fr"><a href="http://validform.rjboy.cn">Validform</a><b> | </b><a href="http://www.rjboy.cn/?p=789" target="_blank">hScrollpane</a><b> | </b><a href="http://www.rjboy.cn/?p=708" target="_blank">Xslider</a></p>
    </div>
</div>

<script type="text/javascript" src="demo/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="demo/js/Validform_v4.0_min.js"></script>

<script type="text/javascript">
$(function(){
	
	/*
	$(".registerform").Validform();  //就这一行代码！;
	*/
	
	$(".registerform").Validform({
		tiptype:2 //提示类型, 默认是1:无右侧文字提示, 2表示有右侧文字提示
	});
	
})
</script>
</body>
</html>